<template>
  <div class="jmnl-box">
    <div><span class="Res-List"></span> 居民年龄统计</div>
    <div class="Res-Date">
      <span>选择签约日期</span>
      <!-- 日期选择器 -->
      <DatePicker></DatePicker>
    </div>
    <div>
      <!-- 机构 -->
      <ResidentOption></ResidentOption>
    </div>
    <div class="jmnl-chart">
      <jmnlChart @make="getInfo"></jmnlChart>
    </div>
    <div>
      <div class="Res-btn">
        <el-button @click="ResDerive">导出</el-button>
      </div>
    </div>
    <div>
      <el-table show-summary="true" :data="datagender" stripe style="width: 100%;font-size: 12px;">
        <el-table-column prop="no" label="序号" align="center" />
        <el-table-column prop="name" label="年龄段" align="center" />
        <el-table-column prop="value" label="人次" align="center" />
        <el-table-column prop="ratio" label="比例" align="center" />
      </el-table>
    </div>
  </div>
</template>

<script lang='ts' setup>
import { ref } from 'vue'
import DatePicker from "@/components/mmm/DatePicker.vue"
import ResidentOption from "@/components/mmm/ResidentOption.vue"
import jmnlChart from "@/components/mmm/jmnlChart.vue"
import * as XLSX from "xlsx";
import { ElMessage } from 'element-plus'
let datagender = ref()


const getInfo = (arg: any) => {
  console.log("arg", arg.value);
  datagender.value = arg.value;

}
//表格导出
const ResDerive = () => {
  const data = XLSX.utils.json_to_sheet(datagender.value)//此处res.result为表格的数据
  const wb = XLSX.utils.book_new()
  XLSX.utils.book_append_sheet(wb, data, 'test-data')//test-data为定义的表格中表头名
  XLSX.writeFile(wb, 'test.xlsx')//test.xlsx为自定义的文件名

  ElMessage({
    message: "导出成功",
    type: 'success'
  })


}

</script>

<style lang='scss' scoped>
.jmnl-box {
  @include BoxStyle;

  .Res-List {
    @include dataList;
  }

  .Res-Date {
    font-size: 12px;
    display: flex;
    color: #999;
    margin-top: 20px;

    span {
      margin-top: 3px;
    }

  }

  .jmnl-chart {
    width: 1000px;
    margin-left: 340px;
  }

  .Res-btn {
    text-align: right;
    margin: 20px;
  }
}
</style>